@baseColor: #25BC89;

// 头图
.information-aside {
  width: 100%;
  position: relative;
  .information-aside-img {
    > img {
      width: 100%;
    }
  }
  .information-aside-logo {
    width: 163px;
    height: 155px;
    background: url("../../images/information/logo1920.png") no-repeat center;
    background-size: 163px 155px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 列表标签页
.information-main {
  margin-top: 50px;
  .container .row {
    h2 {
      font-size: 1.8rem;
    }
    .nav {
      border: none;
      > li {
        margin: 1.1rem 1.4rem .6rem 0;
        &:last-of-type {
          margin-right: 0;
        }
        &.active > a {
          color: #fff;
          background-color: @baseColor;
        }
        > a {
          color: @baseColor;
          padding: .4rem 1.5rem;
          border: 1px solid @baseColor;
          border-radius: 0;
          &:focus,&:hover {
            color: #fff;
            background-color: @baseColor;
          }
        }
      }
    }
    .information-main-list {
      padding-top: 2.6rem;
      > li {
        border: 2px solid #ccc;
        border-left: 2px solid @baseColor;
        margin-bottom: 1.2rem;
        .media {
          cursor: pointer;
          .media-body {
            padding: 1.2rem 1rem .6rem 1.6rem;
            position: relative;
            .media-heading {
              font-size: 1.4rem;
              & + span {
                color: @baseColor;
                position: absolute;
                right: 1rem;
                top: 1.2rem;
              }
            }
            span:nth-last-of-type(-n + 3) {
              color: @baseColor;
              .iconfont {
                font-size: 1rem;
              }
            }
          }
        }
      }
    }
    .information-page {
      float: right;
      margin-bottom: 4rem;
      li > a {
        color: @baseColor;
        display: inline;
      }
    }
  }
}

// 详情页
.information-main {
  .container .row {
    .col-sm-3 {
      .erweima {
        text-align: center;
        line-height: 1.7rem;
        font-size: 1rem;
        > img {
          width: 80%;
          display: block;
          margin: 1rem auto 0;
        }
        .ZXG-APP {
          color: @baseColor;
        }
      }
      .information-recommend {
        margin-top: 2.1rem;
        h2 {
          font-size: 1.75rem;
        }
        .information-recommend-list {
          > li {
            padding-top: .5rem;
            .media {
              border: 1px solid @baseColor;
              width: 100%;
              height: 4.75rem;
              .media-body {
                padding: .5rem 0 0 .5rem;
                box-sizing: border-box;
                .media-heading {
                  font-size: 1.1rem;
                  font-weight: bold;
                  & + p {
                    font-size: .8rem;
                    margin: 0;
                  }
                }
                .iconfont {
                  color: #b8b8b8;
                  font-size: 1rem;
                  & + span {
                    color: #b8b8b8;
                    font-size: .65rem;
                  }
                }
              }
              .media-right {
                img {
                  width: 4.75rem;
                }
              }
            }
          }
        }
        .information-recommend-more {
          font-size: .9rem;
          color: @baseColor;
          float: right;
        }
      }
    }
    .col-sm-9 {
      > h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }
      .describe {
        color: #595959;
        span {
          margin-right: 1.2rem;
        }
        .iconfont {
          color: #b8b8b8;
          font-size: 1rem;
          float: right;
          & + span {
            color: #b8b8b8;
            float: right;
          }
        }
        & + img {
          margin: 1.3rem 0 .3rem;
        }
      }
      > p {
        line-height: 2.1rem;
        font-size: .9rem;
        text-indent: 1.8rem;
        margin-bottom: 2rem;
      }
      .information-praise {
        color: #fff;
        background-color: #28bd86;
        border-radius: 5px;
        float: right;
        font-size: .9rem;
        padding: .3rem 1rem;
        margin-bottom: 3.5rem;
        > .iconfont {
          font-size: 1rem;
        }
      }
      .information-comment {
        padding-top: 3.5rem;
        .comment-line {
          display: inline-block;
          width: 2rem;
          border: 2px solid @baseColor;
          margin: 0;
        }
        .textarea-body {
          position: relative;
          .comment-textarea {
            width: 100%;
            height: 10rem;
            border: 1px solid @baseColor;
            resize: none;
            padding: .5rem;
            box-sizing: border-box;
            font-size: .9rem;
            &::-webkit-input-placeholder {
              font-size: .9rem;
            }
            &:-moz-placeholder {
              font-size: .9rem;
            }
            &::-moz-placeholder {
              font-size: .9rem;
            }
            &:-ms-input-placeholder {
              font-size: .9rem;
            }
          }
          .textarea-num {
            position: absolute;
            bottom: .5rem;
            right: .5rem;
            font-size: .9rem;
            > i {
              color: @baseColor;
              font-style: normal;
            }
          }
        }
        .textarea-footer {
          height: 52px;
          margin-top: -6px;
          border-bottom: 1px solid @baseColor;
          border-left: 1px solid @baseColor;
          border-right: 1px solid @baseColor;
          margin-bottom: 3.4rem;
          .textarea-face {
            height: 100%;
            width: 52px;
            border-right: 1px solid @baseColor;
            float: left;
            position: relative;
            .face-sanjiao {
              width: 8px;
              height: 8px;
              border-top: 4px solid transparent;
              border-bottom: 4px solid transparent;
              border-right: 4px solid transparent;
              border-left: 4px solid @baseColor;
              transform: rotate(45deg);
              position: absolute;
              bottom: -4px;
              right: -4px;
            }
          }
          > button {
            float: right;
            height: 100%;
            width: 9rem;
            background-color: @baseColor;
            color: #fff;
          }
        }
        .information-comment-list {
          ul > li {
            width: 100%;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
            padding: 1.8rem 1rem .5rem 4.3rem;
            &:last-of-type {
              border: none;
            }
            > p {
              font-size: .9rem;
              color: @baseColor;
              font-weight: bold;
              width: 4.3rem;
              position: absolute;
              top: 1.8rem;
              left: 0;
            }
            .comment-list-text {
              > p {
                color: #595959;
                font-size: .9rem;
                margin: 0;
              }
              > span {
                color: #979797;
                font-size: .8rem;
              }
            }
          }
        }
      }
    }
  }
}